<template>
  <div>
    <el-row>
      <el-col :span="6">
        <div class="left-top">
          <el-card>
            <el-form>
              <h3>商品录入</h3>
              <hr />
              <div>*商品编码 <el-input style="width: 150px"></el-input></div>
              <div>*订购数量 <el-input style="width: 150px"></el-input></div>
              <el-button>ENTER ITEM</el-button>
              <el-button>END SALE</el-button>
            </el-form>
          </el-card>
          <el-card>
            <el-form>
              <h3>订单支付</h3>
              <hr />
              <div>*付款金额 <el-input style="width: 150px"></el-input></div>
              <div>找零<el-input style="width: 150px"></el-input></div>
              <el-button>MAKE PAYMENT</el-button>
            </el-form>
          </el-card>
        </div>
      </el-col>
      <el-col :span="18">
        <el-button style="float: right">MAKE NEW SALE</el-button>
        <div class="right-top">
          <el-descriptions :column="3" :size="size" border>
            <el-descriptions-item><template slot="label">会员</template>张三</el-descriptions-item>
            <el-descriptions-item><template slot="label">订单号</template>123456</el-descriptions-item>
            <el-descriptions-item><template slot="label">总金额</template>115</el-descriptions-item>
            <el-descriptions-item><template slot="label">总件数</template>10</el-descriptions-item>
            <el-descriptions-item><template slot="label">状态</template>
            <el-tag size="small">已预订</el-tag></el-descriptions-item>
            <el-descriptions-item><template slot="label">备注</template>暂无</el-descriptions-item>
          </el-descriptions>
        </div>

        <div>
          <el-card>
            <h3>订单明细</h3>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column fixed prop="itemId" label="序号" width="150">
              </el-table-column>
              <el-table-column prop="itemSn" label="商品编号" width="120">
              </el-table-column>
              <el-table-column prop="productName" label="商品名称" width="120">
              </el-table-column>
              <el-table-column prop="price" label="价格" width="120">
              </el-table-column>
              <el-table-column prop="quantity" label="数量" width="300">
                <template>
                  <el-input-number
                    v-model="quantity"
                    @change="handleChange"
                    :min="1"
                    :max="10"
                    label="描述文字"
                  ></el-input-number
                ></template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button
                    @click="handleClick(scope.row)"
                    type="text"
                    size="small"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          itemId: "1",
          itemSn: "101",
          productName: "铅笔",
          price: "4.00",
        },
        {
           itemId: "2",
          itemSn: "102",
          productName: "铅笔盒",
          price: "20.00",
          
        },
      ],quantity: "1",
    };
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
  },
};
</script>

<style>
.right-top {
  margin: 30px;
}
.left-top {
  margin: 20px;
}
</style>